<template>
	<view class="content">
		<view class="title">上传你的风格照</view>

		<view class="upload_area">
			<view class="left">
				<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" @click="upImgcard('left')">
					<view v-if="isBlank(imgArr.left)" style="display: flex;flex-direction: column;align-items: center;">
						<view class="icon jia" style="color: #333333;"></view>
						<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
					</view>
					<u-image v-else width="420rpx" height="840rpx" :src="imgArr.left" mode="aspectFill"></u-image>
				</view>
			</view>
			<view class="right">
				<view class="right_top">
					<view class="slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150" @click="upImgcard('right1')">
						<view v-if="isBlank(imgArr.right1)" style="display: flex;flex-direction: column;align-items: center;">
							<view class="icon jia" style="color: #333333;"></view>
							<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
						</view>
						<u-image v-else width="270rpx" height="420rpx" :src="imgArr.right1" mode="aspectFill"></u-image>
					</view>
				</view>
				<view class="right_bottom">
					<view class="slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150" @click="upImgcard('right2')">
						<view v-if="isBlank(imgArr.right2)" style="display: flex;flex-direction: column;align-items: center;">
							<view class="icon jia" style="color: #333333;"></view>
							<view style="font-size: 28upx;color: #666666;margin-top: 16upx;">添加风格照</view>
						</view>
						<u-image v-else width="270rpx" height="420rpx" :src="imgArr.right2" mode="aspectFill"></u-image>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_area">
			<view class="btn">
				<u-button shape="circle" size="medium" @click="goback">暂不上传</u-button>
			</view>
			<view style="width: 20upx;"></view>
			<view class="btn">
				<u-button shape="circle" :disabled='disabled' @click="editUserInfo">确定</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		isBlank,
		uuid
	} from '@/utils/common.js'
	import zhUpFile from '@/components/zh-upFile'

	export default {
		data() {
			return {
				disabled: true,
				imgArr: {
					left: '',
					right1: '',
					right2: ''
				},
				config: {
					count: 1, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
				postData: {
					key: '',
					token: ''
				}
			}
		},
		watch: {
			'imgArr': {
			      handler (newValue, oldValue) {
					if (!isBlank(this.imgArr.left) && !isBlank(this.imgArr.right1) && !isBlank(this.imgArr.right2)) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				  },
			      deep: true
			 }
		},
		components: {
			'zh-upFile': zhUpFile
		},
		methods: {
			isBlank,
			// 不填返回主页
			goback() {
				uni.reLaunch({
					url: '/pages/order/placeOrderIndex'
				})
			},
			// 上传第一张图片
			upImgcard(position) {
				var _this = this

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						uni.showLoading({
							title: '上传中...'
						});

						let tempFilePaths = res.tempFilePaths

						// 获取token 
						_this.$u.api.getPostingQiniuToken().then(res => {
							if (res.code === 200) {
								_this.postData.token = JSON.parse(res.data).qiniuToken
								_this.postData.key = _this.$u.guid(tempFilePaths[i])
								// 开始上传
								for (var i = 0; i < tempFilePaths.length; i++) {
									uni.uploadFile({
										url: 'https://upload-Z2.qiniup.com', //华南地区用这个
										filePath: tempFilePaths[i],
										name: 'file',
										formData: {
											'key': _this.postData.key,
											'token': _this.postData.token
										},
										success: (uploadFileRes) => {
											let img = "https://posting.imguangguang.com/" + JSON.parse(uploadFileRes.data).key
											if (position === 'left') {
												_this.imgArr.left = img
											} else if (position === "right1") {
												_this.imgArr.right1 = img
											} else if (position === "right2") {
												_this.imgArr.right2 = img
											}
										},
										fail: (error) => {
											if (error && error.response) {
												uni.showToast({
													title: error.response,
													icon: 'none'
												})
											}
										},
										complete: () => {
											setTimeout(function() {
												uni.hideLoading();
											}, 250);
										},
									});
								}
							}
						})
					}
				});
			},
			// 第一次提交图片墙资料
			editUserInfo() {
				let bgGroup = []
				bgGroup.push(this.imgArr)
				var param = {
					bgGroup: JSON.stringify(bgGroup)
				}

				this.$u.api.editUser(param).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({
							title: '设置风格照成功',
							duration: 2000,
							success: () => {
								// 跳转至上传风格照页面
								uni.reLaunch({
									url: "/pages/order/placeOrderIndex"
								})
							}
						});
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		padding: 32upx 39upx 36upx 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #F7F8FA;

		.title {
			font-size: 48upx;
			font-weight: 600;
			color: #000000;
		}

		.upload_area {
			margin: 61upx 0 81upx 0;
			height: 840upx;
			background: #f4f4f4;
			border-radius: 20upx;
			display: flex;

			.left {
				width: 420upx;
				height: 100%;
			}

			.right {
				width: 270upx;

				&_top {
					height: 420upx;
					background: #EAEAEA;
				}

				&_bottom {
					height: 420upx;
					background: #DEDEDE;
				}
			}
		}

		.btn_area {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.btn {
				width: 335upx;
				height: 90upx;
				button {
					width: 100%;
					height: 100%;
					font-size: 32upx !important;
				}
			}
		}
	}

	.slot-btn {
		width: 420rpx;
		height: 840rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);

		image {
			width: 100%;
			height: 100%;
		}
	}

	.slot-btn2 {
		width: 270rpx;
		height: 420rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #EAEAEA;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.slot-btn3 {
		width: 270rpx;
		height: 420rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #DEDEDE;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.slot-btn__hover {
		background-color: rgba(235, 236, 238, 0.9);
	}
	
</style>
